<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box">
      <div class="popupbody-title">
        <span>编辑添加异常档案</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:30px 30px;">
        <el-form label-width="80px" ref="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="学生姓名:" v-if="!deviceId">
                <el-tag
                    :key="dynamicTagsArray[0].name"
                    closable
                    v-if="dynamicTagsArray.length"
                    @close="handleClose()">
                  {{ dynamicTagsArray[0].name }}
                </el-tag>
                <el-button size="small" @click="studentVisible=true" v-else>选择对应学生</el-button>
              </el-form-item>
              <el-form-item label="学生姓名:" v-else>
                <el-tag
                    v-if="dynamicTagsArray.length"
                    :key="dynamicTagsArray[0].name">
                  {{ dynamicTagsArray[0].name }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="异常事项:">
                <div class="tag-line">
                  <span class="tag-line-list" @click="tagFn(item.id)"
                        :class="cate_id_list.indexOf(item.id)!==-1?'activeTag':''" v-for="item in careList"
                        :key="item.id"><i
                      class="iconfont"
                      :class="cate_id_list.indexOf(item.id)!==-1?'icondagou':'iconxuanzhongyuandian'"></i>{{
                      item.name
                    }}</span>
                </div>
                <div v-if="deviceId" style="color: #999;">
                  <i class="el-icon-warning" style="color: #eca32e;"></i>异常事项为空时，将自动移除该生的异常档案
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
        <el-button type="primary" size="small" @click="submitFormAdd()">确认并保存</el-button>
      </div>
    </div>
    <!--    全校单选学生 -->
    <singleStudentModle :visible.sync="studentVisible" @studentFn="studentFn"
                        :dynamicTagsArray="dynamicTagsArray"></singleStudentModle>
  </div>
</template>

<script>

export default {
  props: ['visible', 'deviceId'],
  components: {},
  data() {
    return {
      studentTitle: '',
      dialogVisible: this.visible,
      cate_id_list: [],
      careList: [],
      studentVisible: false,
      dynamicTagsArray: [],
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.cate_id = 0
        this.categroyFn()
        console.log('this.deviceId:', this.deviceId)
        if (this.deviceId) {
          this.getDetailFn()
        }
      }else{
        this.dynamicTagsArray = []
        this.cate_id_list = []
      }
    }
  },
  created() {
  },
  methods: {
    async getDetailFn() {
      let data = await this.$fetch(this.api.Developmental.carefull.caseUser.student, {id: this.deviceId})
      if (!data.code) {
        console.log(123)
        let newUser = {
          id: data.vo.id,
          name: data.vo.name
        }
        this.dynamicTagsArray.push(this.getJson(newUser))
        for (let i in data.vo.disease_ids) {
          this.cate_id_list.push(data.vo.disease_ids[i].id)
        }
      }
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    },
    async categroyFn() {
      let data = await this.$fetch(this.api.Developmental.carefull.disease.index, {p: 0})
      if (!data.code) {
        this.careList = data.list
      }
    },
    async submitFormAdd() {
      if (!this.dynamicTagsArray.length) {
        this.$message.error('选择创建学生')
        return
      }
      // if (!this.cate_id_list.length) {
      //   this.$message.error('选择注意事项')
      //   return
      // }

      let data = await this.$post(this.api.Developmental.carefull.caseUser.student, {
        disease_ids: this.cate_id_list.join(','),
        id: this.dynamicTagsArray[0].id
      })
      if (!data.code) {
        this.$message.success(data.msg)
        this.$emit('beforePageFn')
        this.closePOpup()
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    tagFn(option) {
      if (this.cate_id_list.indexOf(option) === -1) {
        this.cate_id_list.push(option)
      } else {
        this.cate_id_list.splice(this.cate_id_list.indexOf(option), 1)
      }
    },
    // 收到学生信息
    studentFn(option) {
      console.log('收到数据内容：', option)
      this.dynamicTagsArray[0] = this.getJson(option)
      this.studentVisible = false
    },
    // 删除用户
    handleClose() {
      this.dynamicTagsArray.splice(0, 1)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.tag-line-list {
  margin-right: 10px;
  border: 1px solid #eee;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.tag-line-list i {
  margin-right: 5px;
}

.activeTag {
  border: 1px solid #3e89ff;
  background: #e7f0ff;
}

.activeTag i, .activeTag {
  color: #3e89ff;

}
.popupbody-boxin{
  width: 500px;
}
</style>


